<template>
  <div class="contract-class">
    <div class="tools">
      <p @click="editType = 'title'" :style="editType === 'title'? 'color: red': 'color: #000'">title</p>
      <p @click="editType = 'row'" :style="editType === 'row'? 'color: red': 'color: #000'">row</p>
    </div>
    <div class="edit-content">
      <draggable v-model="contentMy" :move="onMove" :options="dragOptions" @start="dragStart" @end="isDragging=false">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="content"></el-input>
      </draggable>
    </div>
    <div class="right-content">
      <draggable class="right-layout" :options="dragOptions2" v-model="listContent" style="border: 1px solid red; min-height: 80px;" @add="onAdd">
        <div v-for="(c, index) in listContent" v-if="typeof c === 'string'" class="content-char" :style="c.indexOf('lineClass') > -1 ? 'width:100%' : ''" v-html="c"></div>
        <el-input v-else-if="c instanceof Object && c.type=== 'input'"  v-model="c.value" style="width: 250px"></el-input>
        <el-date-picker v-else-if="c instanceof Object && c.type=== 'date'"  v-model="c.value" type="date" placeholder="选择日期" :value-format="c.valueFormat"></el-date-picker>
      </draggable>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  export default {
    data() {
      return {
        editable:true,
        isDragging: false,
        delayedDragging:false,
        textEditList: [{
          type: 'title'
        }, {
          type: 'row'
        }],
        editType: 'title',
        content: '',
        listContent:[],
        contentMy:[]
      };
    },
    components:{
      draggable
    },
    methods: {
      onMove({relatedContext, draggedContext}) {
        // const relatedElement = relatedContext.element;
        // const draggedElement = draggedContext.element;
        console.log(relatedContext)
        console.log(draggedContext)
        return relatedContext.list;
      },
      dragStart(evt){
        this.activeName = evt.item.id;
        this.isDragging=true;
      },
      onAdd: function (/**Event*/evt) {
        // same properties as onEnd
        console.log(evt);
      },
    },
    computed: {
      dragOptions () {
        return  {
          animation: 0,
          group: {
            name: 'description',
            pull: 'clone'
          },
          disabled: !this.editable,
          // ghostClass: 'ghost',
          sort: false
        };
      },
      dragOptions2 () {
        return  {
          animation: 0,
          group: {
            name: 'description'
          },
          disabled: !this.isDragging
          // ghostClass: 'ghost',
        };
      },
      myAdd(evt){
        // this.controlHistory.push({
        //   start: evt.newIndex,
        //   len: 1
        // });
        console.log(evt);
      }
    },
    watch: {
      isDragging (newValue) {
        if (newValue){
          this.delayedDragging= true
          return
        }
        this.$nextTick( () =>{
          this.delayedDragging =false
        })
      },
      content(val){
        // this.listContent.push('<p class="lineClass"><b>' + title + '</b><br></p>');
        // this.controlHistory.push({
        //   start: this.listContent.length - 1,
        //   len: 1,
        //   content: title
        // });
        this.contentMy = [];
        this.contentMy.push(val);
      }
    }
  }
</script>

<style scoped>
  .contract-class {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
  }

  .contract-class > div {
    position: relative;
    height: 100%;
  }

  .tools {
    border-right: 1px solid #d1dbe5;
    width: 200px;
  }

  .edit-content {
    border-right: 1px solid #d1dbe5;
    width: 400px;
  }

  .right-content{
    width: 100%;
  }

  .right-content .right-layout{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .right-content .right-layout .content-char{
    line-height: 45px;
  }
</style>
